<?php include_once 'header.php';?>
	<div class="row">
		<div class="col-md-12">

			<div class="card shadow">
				<div class="card-body">
					<div class="toolbar">
						<form class="form">
							<div class="form-row">
								<div class="form-group col-auto mr-auto">
									<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#modal" onclick="modal_show()"><i class="fe fe-plus fe-12 mr-2"></i><span class="small">添加卡密组</span></button>
								</div>

								<div class="form-group col-auto col-md-3">
									<div class="input-group so">
										<input type="text" class="form-control" placeholder="输入搜索内容" id="so">
										<div class="input-group-append">
											<button class="btn btn-primary" type="button" id="so_submit">搜索</button>
										</div>
									</div>
								</div>
							</div>
						</form>
					</div>
					<div class="table-responsive">
						<table class="table table-borderless table-hover mb-0">
							<thead>
								<tr>
									<th class="wd-20">
										组ID
									</th>
                                    <th class="wd-20">
                                        应用
                                    </th>
									<th class="wd-20">
										组名称
									</th>
									<th class="wd-20">
										客户端
									</th>
									<th class="wd-20">
										面值
									</th>
									<th class="wd-20">
										卡密数/已使用
									</th>
									<th class="wd-20">
										管理
									</th>
								</tr>
							</thead>
							<tbody id="tbody_list">


							</tbody>
						</table>
					</div>
					<nav class="mb-0">
						<ul class="pagination justify-content-center mb-0" id="poge_list_ul">

						</ul>
					</nav>

				</div>
			</div>
		</div>
	</div>

	<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="modal_title">
						添加卡密组
					</h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<div class="modal-body">
					<form>
						<input type="number" class="form-control" id="modal_id" placeholder="1" hidden>
						<div class="form-group">
							<label>卡密组名称</label>
							<input type="text" class="form-control" id="modal_name" placeholder="如：天卡">
						</div>

						<div class="form-group">
							<label>卡密面值</label>
							<div class="input-group">
								<input type="number" class="form-control" placeholder="1" id="modal_val" value="1">
								<div class="input-group-append">
									<select id="modal_val_type" class="form-control" onchange="select_val_type(this.value)">
										<option value="s">秒</option>
										<option value="i">分</option>
										<option value="h">时</option>
										<option value="d">天</option>
										<option value="long">永久</option>
									</select>
								</div>
							</div>
						</div>

						<div class="form-group">
							<label>客户端最大值<span class="fe fe-help-circle ml-1" data-toggle="tooltip" title="可设置该组卡密允许绑定多少台设备，如：3，则该组卡密可以同时绑定3台设备使用，0则表示不限"></span></label>
							<div class="input-group">
								<input type="number" class="form-control" placeholder="1" id="modal_clientmax" value="1">
								<div class="input-group-append">
									<span class="input-group-text">台</span>
								</div>
							</div>
						</div>


						<div class="form-group mb-2">
							<button type="submit" class="btn btn-primary btn-block" id="submit">提交</button>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>

	<div id="del" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
		<div class="modal-dialog modal-sm">
			<div class="modal-content">
				<div class="modal-body p-4">
					<div class="text-center">
						<h4 class="mt-2">删除警告</h4>
						<p class="mt-3">确认删除卡密组：<strong class="text-danger me-1" id="del_name">null</strong> ？<br>删除后不可恢复！请慎重操作</p>
						<input type="number" class="form-control" id="del_id" placeholder="1" hidden>
						<button type="button" class="btn btn-danger mr-2 my-2" id="del_submit">确认删除</button>
						<button type="button" class="btn btn-light" data-dismiss="modal">取消删除</button>
					</div>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal-dialog -->
	</div><!-- /.modal -->
	<script>
        function init(act, pg) {
            initAct = act;
            initPg = pg;
            $.ajax({
                cache: false,
                type: "POST",
                data: {
                    act,
                    pg
                },
                dataType: "json",
                success: function(data) {
                    if (data.code == 200) {
                        add_list(data.data.list);
                        if (data.data.pageList) {
                            page_list(data.data.pageList, data.data.currentPage, data.data.maxPage)
                        }
                        loading_end(true, null)
                    } else {
                        loading_end(false, data.msg, true)
                    }
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    loading_end(false, textStatus, true)
                }
            });
            return false
        }
        $("#submit").click(function() {
            var submit_data = {};
            submit_data.act = $("#modal_title").html() == "编辑卡密组" ? "edit": "add";
            if (submit_data.act == "edit") {
                submit_data.id = $("#modal_id").val()
            }
            submit_data.name = $("#modal_name").val();
            submit_data.val = timeTos($("#modal_val").val(), $("#modal_val_type").val());
            submit_data.clientmax = $("#modal_clientmax").val();
            $("#submit").html('<i class="spinner-ui fe fe-rotate-cw fe-12 mr-2"></i>正在提交');
            $("#submit").attr("disabled", true);
            $.ajax({
                cache: false,
                type: "POST",
                data: submit_data,
                dataType: "json",
                success: function(data) {
                    $("#submit").html("确认添加");
                    $("#submit").attr("disabled", false);
                    if (data.code == 200) {
                        if (submit_data.act == "edit") {
                            cocoMessage.success("更新成功", 2000);
                            update_list(data.data.list[0])
                        } else {
                            cocoMessage.success("添加成功", 2000);
                            add_list(data.data.list, false, true)
                        }
                        $("#modal").modal("hide")
                    } else {
                        cocoMessage.error(data.msg, 2000)
                    }
                }
            });
            return false
        });
        $("#del_submit").click(function() {
            var del_id = $("#del_id").val();
            $("#del_submit").html('<i class="spinner-ui fe fe-rotate-cw fe-12 mr-2"></i>正在删除');
            $("#del_submit").attr("disabled", true);
            $.ajax({
                cache: false,
                type: "POST",
                data: {
                    act: "del",
                    id: del_id
                },
                dataType: "json",
                success: function(data) {
                    $("#del_submit").html("确认删除");
                    $("#del_submit").attr("disabled", false);
                    if (data.code == 200) {
                        $("#list_" + del_id).remove();
                        cocoMessage.success(data.msg, 2000);
                        $("#del").modal("hide");
                        var tbody = $("#tbody_list").children();
                        if (tbody.length < 1) {
                            init(initAct, initPg)
                        }
                    } else {
                        cocoMessage.error(data.msg, 2000)
                    }
                }
            });
            return false
        });
        function add_list(list, empty = true, prepend = false) {
            if (empty) {
                $("#tbody_list").empty()
            }
            for (var i = 0; i < list.length; i++) {
                var data = "<td>" + list[i].id + "</td>";
                // TODO: 这里可能有bug
                var appName = <?= json_encode($this->app['app_name']) ?>;
                data += "<td>" + appName + "</td>";

                data += '<td>' + list[i].name + "</td>";
                data += "<td>" + (list[i].clientMax == 0 ? '不限': (list[i].clientMax + '台')) + "</td>";
                data += "<td>" + valTotype(list[i].val) + "</td>";
                data += '<td><span class="text-success">' + list[i].km_num + '</span>/<span class="text-danger">' + list[i].km_uses + "</span></td>";
                data += '<td><button type="button" class="btn btn-primary btn-sm mr-1" data-toggle="modal" data-target="#modal" onclick="modal_show(\'' + encodeURI(JSON.stringify(list[i])) + '\');"><i class="fe fe-edit fe-12 mr-2"></i><span class="small">编辑</span></button><button type="button" class="btn btn-danger btn-sm" onclick="del_list(' + list[i].id + ",'" + list[i].name + '\');"><i class="fe fe-trash-2 fe-12 mr-2"></i><span class="small">删除</span></button></td>';
                if (prepend) {
                    $("#tbody_list").prepend('<tr id="list_' + list[i].id + '">' + data + "</tr>")
                } else {
                    $("#tbody_list").append('<tr id="list_' + list[i].id + '">' + data + "</tr>")
                }
            }
        }
        function update_list(list) {
            var data = "<td>" + list.id + "</td>";
            data += '<td class="text-left">' + list.name + "</td>";
            data += "<td>" + (list.clientMax == 0 ? '不限': (list.clientMax + '台')) + "</td>";
            data += "<td>" + valTotype(list.val) + "</td>";
            data += '<td><span class="text-success">' + list.km_num + '</span>/<span class="text-danger">' + list.km_uses + "</span></td>";
            data += '<td><button type="button" class="btn btn-primary btn-sm mr-1" data-toggle="modal" data-target="#modal" onclick="modal_show(\'' + encodeURI(JSON.stringify(list)) + '\');"><i class="fe fe-edit fe-12 mr-2"></i><span class="small">编辑</span></button><button type="button" class="btn btn-danger btn-sm" onclick="del_list(' + list.id + ",'" + list.name + '\');"><i class="fe fe-trash-2 fe-12 mr-2"></i><span class="small">删除</span></button></td>';
            $("#list_" + list.id).html(data)
        }
        function del_list(id, name) {
            $("#del_name").html(name);
            $("#del_id").val(id);
            $("#del").modal("show")
        }
        function modal_show(list = null) {
            if (list != null) {
                var udata = decodeURI(list);
                var data = JSON.parse(udata.replace(/\n/g, "\\n").replace(/\r/g, "\\r"));
                $("#modal_title").html("编辑卡密组");
                $("#modal_id").val(data.id);
                $("#modal_name").val(data.name);
                $("#modal_clientmax").val(data.clientMax);
                $("#modal_val_type").val(sTotime(data.val, false));
                if (sTotime(data.val, false) == 'long') {
                    $("#modal_val").attr("readonly", true)
                } else {
                    $("#modal_val").attr("readonly", false)
                }
                $("#modal_val").val(sTotime(data.val, true))
            } else {
                $("#modal_val_type").val("d");
                $("#modal_val").attr("readonly", false);
                $("#modal_id").val("");
                $("#modal_name").val("");
                $("#modal_title").html("添加卡密组");
                $("#modal_val").val("");
                $("#modal_clientmax").val('1')
            }
        }
        function select_val_type(val) {
            if (val == 'long') {
                $("#modal_val").attr("readonly", true);
                $("#modal_val").val("9999999999")
            } else {
                $("#modal_val").attr("readonly", false);
                var val = $("#modal_val").val();
                if (val == 9999999999) {
                    $("#modal_val").val("")
                }
            }
        }
        function valTotype(val) {
            if (val == 9999999999) {
                return '永久';
            }
            if (isInteger(val / 60 / 60 / 24)) {
                return (val / 60 / 60 / 24) + '天';
            }
            if (isInteger(val / 60 / 60)) {
                return (val / 60 / 60) + '时';
            }
            if (isInteger(val / 60)) {
                return (val / 60) + '分';
            } else {
                return val + '秒';
            }
        };
    </script>
<?php include_once 'footer.php';?>
